<template>
  <view>
    <uni-forms ref="form">
      <view class="input-box u-demo-block__content">
        <uni-forms-item name="text">
          <u--input
            v-model="hospitalSearchKey"
            @input="updateHospitalList"
            shape="circle"
            border="surround"
            prefixIcon="search"
            placeholder="搜索支持缴费的医院"
          />
        </uni-forms-item>
      </view>
    </uni-forms>
    <view class="hospital-wrap">
      <view class="select-area">
        <Address @determine="confirmCityPicker"></Address>
        <view class="dropdown-item" @click="() => toggleSortPicker(true)">
          {{
            (SortText[sort] + "").length > 3
              ? (SortText[sort] + "").slice(0, 3) + "..."
              : SortText[sort]
          }}
          <image
            class="select-down"
            src="../../static/accompany-service/selectDown.png"
          ></image>
        </view>
      </view>
      <view
        class="hospital-item"
        v-for="(item, index) in hospitalList"
        :key="index"
        @click="() => getPatientByHospital(item)"
      >
        <img :src="item.img_url" :alt="item.title" class="img" />
        <view class="content-box">
          <view class="title"> {{ item.title }} </view>
          <view class="comment-wrap">
            <text class="pos-float comment"> {{ item.distance }}KM </text>
            <view class="pos-float split"></view>
            <text class="pos-float addr comment"> {{ item.address }} </text>
          </view>
        </view>
      </view>
    </view>
    <u-picker
      keyName="text"
      closeOnClickOverlay
      :show="isShowSortPicker"
      :columns="SortList"
      @confirm="confirmSortPicker"
      @cancel="() => toggleSortPicker(false)"
    />
  </view>
</template>

<script>
import Address from "../home/address.vue";
import hospitalUrl from "@/api/expertConsulation";
import { SortMap, SortList, SortText, formatReqData } from "./help";

export default {
  components: { Address },

  data() {
    return {
      city: "",
      latitude: 30,
      longitude: 30,
      hospitalSearchKey: "",
      sort: SortMap.Synth,
      sortList: [],
      hospitalList: [],
      isShowCityPicker: false,
      isShowSortPicker: false,
    };
  },

  onLoad() {
    this.getLocation();
  },

  methods: {
    // 获取定位信息
    getLocation() {
      uni.getLocation({
        type: "gcj02",
        success: ({ longitude, latitude }) => {
          this.latitude = latitude;
          this.longitude = longitude;
          this.updateHospitalList();
        },
        complete: (res) => {},
      });
    },

    // 更新医院列表
    updateHospitalList() {
      uni.showLoading();
      let data = {
        ...formatReqData(this.sort),
      };
      if (this.city) {
        data = {
          ...data,
          city_id: this.city,
        };
      }
      if (this.longitude) {
        data = {
          ...data,
          lng: this.longitude,
        };
      }
      if (this.latitude) {
        data = {
          ...data,
          lat: this.latitude,
        };
      }
      this.$axios({
        url: hospitalUrl.getHospitalList,
        data: data,
      }).then((res) => {
        this.hospitalList = res.data.arr.data;
        if (this.hospitalSearchKey) {
          this.hospitalList = res.data.arr.data.filter((hospital) => {
            return hospital.title.indexOf(this.hospitalSearchKey) !== -1;
          });
        } else {
          this.hospitalList = res.data.arr.data;
        }
        uni.hideLoading();
      });
    },

    // 取反排序弹窗
    toggleSortPicker(isShowSortPicker) {
      this.isShowSortPicker = isShowSortPicker;
    },

    // 选择排序方式点击确定
    confirmSortPicker({ value }) {
      this.sort = value[0].id;
      this.isShowSortPicker = false;
      this.updateHospitalList();
    },

    // 选择城市点击确定
    confirmCityPicker(city) {
      this.city = city;
      this.updateHospitalList();
    },

    // 根据医院获取患者信息
    getPatientByHospital(hospital) {
      uni.navigateTo({
        url: `/pages/pay/payfor/index?hospitalID=${hospital.id}`,
      });
    },
  },

  computed: {
    // 排序列表
    SortList: function () {
      return [
        SortList.map((item) => {
          return {
            id: item,
            text: SortText[item],
          };
        }),
      ];
    },

    // 排序列表文本
    SortText: function () {
      return SortText;
    },
  },
};
</script>

<style lang="scss" scoped>
.input-box {
  background-color: #ffffff;
  padding: 0 20rpx;
  height: 100rpx;

  & .u-input {
    background-color: rgba(243, 244, 248, 1);
  }
}
.select-area {
  background-color: white;
  height: 88rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;

  & .dropdown-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 50%;
    height: 42rpx;
    color: rgba(80, 80, 80, 1);
    font-size: 21rpx;

    & .select-down {
      width: 50rpx;
      height: 50rpx;
      vertical-align: middle;
      margin-left: 10rpx;
    }
  }
}

.hospital-wrap {
  position: absolute;
  top: 120rpx;
  left: 20rpx;
  right: 20rpx;
  bottom: 0rpx;
  padding: 20rpx;
  overflow: scroll;
  background: #fff;

  & .hospital-item {
    width: 100%;
    height: 180rpx;
    border-bottom: 1rpx solid #505050;
    padding-top: 20rpx;

    & .img {
      width: 110rpx;
      height: 110rpx;
      padding: 20rpx;
      float: left;
    }

    & .content-box {
      height: 180rpx;
      width: 500rpx;
      padding-left: 20rpx;
      float: left;

      & .title {
        width: 500rpx;
        font-size: 40rpx;
        color: #000;
        line-height: 89rpx;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }

      & .comment-wrap {
        width: 500rpx;

        & .pos-float {
          float: left;
        }

        & .split {
          position: relative;
          top: 13rpx;
          width: 0;
          height: 30rpx;
          margin: 0 20rpx;
          border-left: 1rpx solid #505050;
        }

        & .addr {
          width: 300rpx;
        }

        & .comment {
          font-weight: 300;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
